home *** CD-ROM | disk | FTP | other *** search
/ Java Interactive Reference Guide / Java Interactive Reference Guide.iso / autorun / java_d.dir / 00192_Field_15.txt < prev    next >
Text File  |  1980-01-11  |  5KB  |  205 lines
  1. Using JavaScript in HTML
  2.  
  3.  
  4. ------------------------------------------------------------------------
  5.  
  6.  
  7. Embedding JavaScript in documents 
  8.  
  9. A script is embedded in HTML within a SCRIPT tag. 
  10.  
  11. <SCRIPT>...</SCRIPT> 
  12.  
  13. The text of a script is inserted between SCRIPT and its end tag. 
  14.  
  15.  
  16.  
  17. Attributes within the SCRIPT tag can be specified as follows: 
  18.  
  19. <SCRIPT LANGUAGE="JavaScript">...</SCRIPT> 
  20.  
  21. The LANGUAGE attribute is mandatory unless the SRC attribute is present and specifies the scripting language. 
  22.  
  23. <SCRIPT SRC="http://myscript.js">...</SCRIPT> 
  24.  
  25. The SRC attribute is optional and, if given, specifies a URL that loads the text of a script. NOTE: Not yet implemented for Beta4 release. 
  26.  
  27. <SCRIPT LANGUAGE="language" SRC=url>...</SCRIPT> 
  28.  
  29. Both attributes may be present. NOTE: Not yet implemented for Beta4 release. 
  30.  
  31.  
  32. ------------------------------------------------------------------------
  33. Usage Notes 
  34.  
  35. ΓÇóScripts placed within SCRIPT tags are evaluated after the page loads. Functions are stored, but not executed. Functions are executed by events in the page. ΓÇóSRC URL information is read in and evaluated as script container content. SRC script is evaluated before in-page script. ΓÇóThe SRC URL should use the .js suffix. ΓÇóA named SCRIPT tag may contain a function body that can be called in an onChange or other event-handler attribute. ΓÇóScripts may be placed inside comment fields to ensure that the script is not displayed when the page's HTML is viewed with a browser unaware of the SCRIPT tag. The entire script is encased by HTML comment tags: 
  36.  
  37. <!-- Begin to hide script contents from old browsers.
  38. // End the hiding here. -->
  39.  
  40.  
  41.  
  42. ΓÇóLike Java, JavaScript is case-sensitive. ΓÇóUse single quotes (') to delimit string literals so that scripts can be distinguished from attribute values enclosed in double quotes. Example: 
  43.  
  44.  
  45. <INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52. ------------------------------------------------------------------------
  53.  
  54.  
  55. Some Introductory Examples
  56.  
  57.  
  58.  
  59. Example 1: A Simple Script. 
  60.  
  61.  
  62.  
  63.  
  64. <HTML>
  65. <HEAD>
  66. <SCRIPT LANGUAGE="JavaScript">
  67. document.write("Hello net.")
  68. </SCRIPT>
  69. </HEAD>
  70. <BODY>
  71. That's all, folks.
  72. </BODY>
  73. </HTML>
  74.  
  75.  
  76.  
  77.  
  78.  
  79. Example 1 page display. 
  80.  
  81. Hello net. That's all folks. 
  82. ------------------------------------------------------------------------
  83.  
  84.  
  85. Example 2, a script with a function and comments. 
  86.  
  87.  
  88. <HTML>
  89. <HEAD>
  90. <SCRIPT LANGUAGE="JavaScript">
  91. <!--  to hide script contents from old browsers
  92.   function square(i) {
  93.     document.write("The call passed ", i ," to the function.","<BR>")
  94.     return i * i
  95.   }
  96.   document.write("The function returned ",square(5),".")
  97. // end hiding contents from old browsers  -->
  98. </SCRIPT>
  99. </HEAD>
  100. <BODY>
  101. <BR>
  102. All done.
  103. </BODY>
  104. </HTML>
  105.  
  106.  
  107.  
  108.  
  109.  
  110. Example 2 page display. 
  111.  
  112. We passed 5 to the function. 
  113. The function returned 25. 
  114. All done. 
  115. ------------------------------------------------------------------------
  116.  
  117.  
  118. Example 3, a script with a form and an event handler attribute. 
  119.  
  120.  
  121. <HTML>                                                           
  122. <HEAD>
  123. <SCRIPT LANGUAGE="JavaScript">
  124. function compute(form) {
  125.    if (confirm("Are you sure?"))
  126.       form.result.value = eval(form.expr.value)
  127.    else
  128.       alert("Please come back again.")
  129. }
  130. </SCRIPT>
  131. </HEAD>
  132.  
  133. <BODY>
  134. <FORM>
  135. Enter an expression:
  136. <INPUT TYPE="text" NAME="expr" SIZE=15 >
  137. <INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
  138. <BR>
  139. Result:
  140. <INPUT TYPE="text" NAME="result" SIZE=15 >
  141. <BR>
  142. </FORM>
  143. </BODY>
  144. </HTML>
  145.  
  146.  
  147.  
  148.  
  149.  
  150. Example 3 page display. 
  151.  
  152. Enter an expression: 9 + 5   Result: 14 
  153. ------------------------------------------------------------------------
  154.  
  155.  
  156. Example 4, a script with a form and event handler attribute within a BODY tag. 
  157.  
  158.  
  159. <HTML>
  160. <HEAD>
  161. <SCRIPT LANGUAGE="JavaScript">
  162. function checkNum(str, min, max) {
  163.     if (str == "") {
  164.         alert("Enter a number in the field, please.")
  165.         return false
  166.     }
  167.     for (var i = 0; i < str.length; i++) {
  168.         var ch = str.substring(i, i + 1)
  169.         if (ch < "0" || ch > "9") {
  170.             alert("Try a number, please.")
  171.             return false
  172.         }
  173.     }
  174.     var num = 0 + str
  175.     if (num < min || num > max) {
  176.         alert("Try a number from 1 to 10.")
  177.         return false
  178.     }
  179.     return true
  180. }
  181. function thanks() {
  182.     alert("Thanks for your input.")
  183. }
  184. </SCRIPT>
  185. </HEAD>
  186.  
  187. <BODY>
  188. <FORM>
  189. Please enter a small number: 
  190. <INPUT NAME="num"
  191.     ONCHANGE="if (!checkNum(this.value, 1, 10)) 
  192.         {this.focus();this.select();} else {thanks()}"
  193.     VALUE="0">
  194. </FORM>
  195. <SCRIPT LANGUAGE="JavaScript">
  196. document.write("<PRE>")
  197. document.writeln("Field name: " + document.forms[0].num.name)
  198. document.writeln("Field value: " + document.forms[0].num.value)
  199. document.write("</PRE>")
  200. </SCRIPT>
  201. </BODY>
  202. </HTML>
  203.  
  204.  
  205.